<template>
  <!-- 子组件必须添加 v-bind="$attrs", 将本组件的父组件中自定义属性和方法传给本组件的子组件中，
    即通过父传孙的方式传递给 antd 的原生 Modal组件中  -->
  <BasicModal
    v-bind="$attrs"
    @register="register"
    @ok="clickOk"
    title="Modal Title"
    :helpMessage="['提示1', '提示2']"
    :centered="false"
    :canFullscreen="false"
    :closable="true"
    :maskClosable="true"
    :mask="true"
    :width="520"
    :destroyOnClose="true"
  >
    <!-- 窗口内容区域-->
    <a-button type="primary" @click="doCloseModal" class="mr-2"> 关闭 </a-button>
    <a-button type="primary" @click="changeModalParams"> 修改窗口参数 </a-button>
  </BasicModal>
</template>
<script lang="ts" setup>
  // BasicModal 和 useModalInner 为 vben 基于 ant Modal 封装的组件
  import { BasicModal, useModalInner } from '@/components/Modal';

  // register 绑定组件, closeModal: 关闭弹窗, setModalProps: 设置窗口参数
  const [register, { closeModal, setModalProps }] = useModalInner();

  // emits, 用于触发父组件的方法
  const emits = defineEmits(['handleOk']);

  function doCloseModal() {
    // 手动调用关闭弹窗方法
    closeModal();
  }

  function changeModalParams() {
    // 通过 setModalProps 方法修改弹窗参数
    setModalProps({
      title: '新的名称',
      helpMessage: '新的提示信息',
      showCancelBtn: false,
      okText: 'ok',
    });
  }

  function clickOk(data) {
    console.log('内部点击了确定按钮...', data);
    emits('handleOk', { id: 1001, name: 'zhangsan' });
    closeModal();
  }
</script>
